<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Aquincum - premium admin template by Eugene Kopyov</title>

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="css/ie.css" rel="stylesheet" type="text/css"> <![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="js/plugins/forms/ui.spinner.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.mousewheel.js"></script>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" src="js/plugins/charts/excanvas.min.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>

<script type="text/javascript" src="js/plugins/tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/plugins/tables/jquery.sortable.js"></script>
<script type="text/javascript" src="js/plugins/tables/jquery.resizable.js"></script>

<script type="text/javascript" src="js/plugins/forms/autogrowtextarea.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.uniform.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputlimiter.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.maskedinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.autotab.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.chosen.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.dualListBox.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.cleditor.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.ibutton.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine.js"></script>

<script type="text/javascript" src="js/plugins/uploader/plupload.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="js/plugins/uploader/jquery.plupload.queue.js"></script>

<script type="text/javascript" src="js/plugins/wizards/jquery.form.wizard.js"></script>
<script type="text/javascript" src="js/plugins/wizards/jquery.validate.js"></script>
<script type="text/javascript" src="js/plugins/wizards/jquery.form.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.breadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.progress.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.colorpicker.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fileTree.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.sourcerer.js"></script>

<script type="text/javascript" src="js/plugins/others/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="js/plugins/others/jquery.elfinder.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.easytabs.min.js"></script>
<script type="text/javascript" src="js/files/bootstrap.js"></script>
<script type="text/javascript" src="js/files/functions.js"></script>

<script type="text/javascript" src="js/charts/chart_side.js"></script>
<script type="text/javascript" src="js/charts/bar_side.js"></script>
<script type="text/javascript" src="js/charts/hBar_side.js"></script>

<!-- Shared on MafiaShare.net  --><!-- Shared on MafiaShare.net  --></head>

<body>

<!-- Top line begins -->
<div id="top">
    <div class="wrapper">
        <a href="index.html" title="" class="logo"><img src="images/logo.png" alt="" /></a>
        
        <!-- Right top nav -->
        <div class="topNav">
            <ul class="userNav">
                <li><a title="" class="search"></a></li>
                <li><a href="#" title="" class="screen"></a></li>
                <li><a href="#" title="" class="settings"></a></li>
                <li><a href="#" title="" class="logout"></a></li>
                <li class="showTabletP"><a href="#" title="" class="sidebar"></a></li>
            </ul>
            <a title="" class="iButton"></a>
            <a title="" class="iTop"></a>
            <div class="topSearch">
                <div class="topDropArrow"></div>
                <form action="">
                    <input type="text" placeholder="search..." name="topSearch" />
                    <input type="submit" value="" />
                </form>
            </div>
        </div>
        
        <!-- Responsive nav -->
        <ul class="altMenu">
            <li><a href="index.html" title="">Dashboard</a></li>
            <li><a href="ui.html" title="" class="exp" id="current">UI elements</a>
                <ul>
                    <li><a href="ui.html">General elements</a></li>
                    <li><a href="ui_icons.html">Icons</a></li>
                    <li><a href="ui_buttons.html">Button sets</a></li>
                    <li><a href="ui_grid.html">Grid</a></li>
                    <li><a href="ui_custom.html" class="active">Custom elements</a></li>
                    <li><a href="ui_experimental.html">Experimental</a></li>
                </ul>
            </li>
            <li><a href="forms.html" title="" class="exp">Forms stuff</a>
                <ul>
                    <li><a href="forms.html">Inputs &amp; elements</a></li>
                    <li><a href="form_validation.html">Validation</a></li>
                    <li><a href="form_editor.html">File uploads &amp; editor</a></li>
                    <li><a href="form_wizards.html">Form wizards</a></li>
                </ul>
            </li>
            <li><a href="messages.html" title="">Messages</a></li>
            <li><a href="statistics.html" title="">Statistics</a></li>
            <li><a href="tables.html" title="" class="exp">Tables</a>
                <ul>
                    <li><a href="tables.html">Standard tables</a></li>
                    <li><a href="tables_dynamic.html">Dynamic tables</a></li>
                    <li><a href="tables_control.html">Tables with control</a></li>
                    <li><a href="tables_sortable.html">Sortable &amp; resizable</a></li>
                </ul>
            </li>
            <li><a href="other_calendar.html" title="" class="exp">Other pages</a>
                <ul>
                    <li><a href="other_calendar.html">Calendar</a></li>
                    <li><a href="other_gallery.html">Images gallery</a></li>
                    <li><a href="other_file_manager.html">File manager</a></li>
                    <li><a href="other_404.html">Sample error page</a></li>
                    <li><a href="other_typography.html">Typography</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
</div>
<!-- Top line ends -->


<!-- Sidebar begins -->
<div id="sidebar">
    <div class="mainNav">
        <div class="user">
            <a title="" class="leftUserDrop"><img src="images/user.png" alt="" /><span><strong>3</strong></span></a><span>Eugene</span>
            <ul class="leftUser">
                <li><a href="#" title="" class="sProfile">My profile</a></li>
                <li><a href="#" title="" class="sMessages">Messages</a></li>
                <li><a href="#" title="" class="sSettings">Settings</a></li>
                <li><a href="#" title="" class="sLogout">Logout</a></li>
            </ul>
        </div>
        
        <!-- Responsive nav -->
        <div class="altNav">
            <div class="userSearch">
                <form action="">
                    <input type="text" placeholder="search..." name="userSearch" />
                    <input type="submit" value="" />
                </form>
            </div>
            
            <!-- User nav -->
            <ul class="userNav">
                <li><a href="#" title="" class="profile"></a></li>
                <li><a href="#" title="" class="messages"></a></li>
                <li><a href="#" title="" class="settings"></a></li>
                <li><a href="#" title="" class="logout"></a></li>
            </ul>
        </div>
        
        <!-- Main nav -->
        <ul class="nav">
            <li><a href="index.html" title=""><img src="images/icons/mainnav/dashboard.png" alt="" /><span>Dashboard</span></a></li>
            <li><a href="ui.html" title="" class="active"><img src="images/icons/mainnav/ui.png" alt="" /><span>UI elements</span></a>
                <ul>
                    <li><a href="ui.html" title=""><span class="icol-fullscreen"></span>General elements</a></li>
                    <li><a href="ui_icons.html" title=""><span class="icol-images2"></span>Icons</a></li>
                    <li><a href="ui_buttons.html" title=""><span class="icol-coverflow"></span>Button sets</a></li>
                    <li><a href="ui_grid.html" title=""><span class="icol-view"></span>Grid</a></li>
                    <li><a href="ui_custom.html" title=""><span class="icol-cog2"></span>Custom elements</a></li>
                    <li><a href="ui_experimental.html" title=""><span class="icol-beta"></span>Experimental</a></li>
                </ul>
            </li>
            <li><a href="forms.html" title=""><img src="images/icons/mainnav/forms.png" alt="" /><span>Forms stuff</span></a>
                <ul>
                    <li><a href="forms.html" title=""><span class="icol-list"></span>Inputs &amp; elements</a></li>
                    <li><a href="form_validation.html" title=""><span class="icol-alert"></span>Validation</a></li>
                    <li><a href="form_editor.html" title=""><span class="icol-pencil"></span>File uploader &amp; WYSIWYG</a></li>
                    <li><a href="form_wizards.html" title=""><span class="icol-signpost"></span>Form wizards</a></li>
                </ul>
            </li>
            <li><a href="messages.html" title=""><img src="images/icons/mainnav/messages.png" alt="" /><span>Messages</span></a></li>
            <li><a href="statistics.html" title=""><img src="images/icons/mainnav/statistics.png" alt="" /><span>Statistics</span></a></li>
            <li><a href="tables.html" title=""><img src="images/icons/mainnav/tables.png" alt="" /><span>Tables</span></a>
                <ul>
                    <li><a href="tables.html" title=""><span class="icol-frames"></span>Standard tables</a></li>
                    <li><a href="tables_dynamic.html" title=""><span class="icol-refresh"></span>Dynamic table</a></li>
                    <li><a href="tables_control.html" title=""><span class="icol-bullseye"></span>Tables with control</a></li>
                    <li><a href="tables_sortable.html" title=""><span class="icol-transfer"></span>Sortable and resizable</a></li>
                </ul>
            </li>
            <li><a href="other_calendar.html" title=""><img src="images/icons/mainnav/other.png" alt="" /><span>Other pages</span></a>
                <ul>
                    <li><a href="other_calendar.html" title=""><span class="icol-dcalendar"></span>Calendar</a></li>
                    <li><a href="other_gallery.html" title=""><span class="icol-images2"></span>Images gallery</a></li>
                    <li><a href="other_file_manager.html" title=""><span class="icol-files"></span>File manager</a></li>
                    <li><a href="#" title="" class="exp"><span class="icol-alert"></span>Error pages <span class="dataNumRed">6</span></a>
                        <ul>
                            <li><a href="other_403.html" title="">403 error</a></li>
                            <li><a href="other_404.html" title="">404 error</a></li>
                            <li><a href="other_405.html" title="">405 error</a></li>
                            <li><a href="other_500.html" title="">500 error</a></li>
                            <li><a href="other_503.html" title="">503 error</a></li>
                            <li><a href="other_offline.html" title="">Website is offline error</a></li>
                        </ul>
                    </li>
                    <li><a href="other_typography.html" title=""><span class="icol-create"></span>Typography</a></li>
                    <li><a href="other_invoice.html" title=""><span class="icol-money2"></span>Invoice template</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
    <!-- Secondary nav -->
    <div class="secNav">
        <div class="secWrapper">
            <div class="secTop">
                <div class="balance">
                    <div class="balInfo">Balance:<span>Apr 21 2012</span></div>
                    <div class="balAmount"><span class="balBars"><!--5,10,15,20,18,16,14,20,15,16,12,10--></span><span>$58,990</span></div>
                </div>
                <a href="#" class="triangle-red"></a>
            </div>
            
            <!-- Tabs container -->
            <div id="tab-container" class="tab-container">
                <ul class="iconsLine ic3 etabs">
                    <li><a href="#general" title=""><span class="icos-fullscreen"></span></a></li>
                    <li><a href="#alt1" title=""><span class="icos-user"></span></a></li>
                    <li><a href="#alt2" title=""><span class="icos-archive"></span></a></li>
                </ul>
                
                <div class="divider"><span></span></div>
                
                <div id="general">
                
                    <!-- Sidebar chart -->
                    <div class="numStats">
                        <ul>
                            <li><a href="#" title="">4248</a><span>visitors</span></li>
                            <li><a href="#" title="">748</a><span>orders</span></li>
                            <li class="last"><a href="#" title="">357</a><span>reviews</span></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    
                    <div class="divider"><span></span></div>
                
                	<!-- Sidebar subnav -->
                    <ul class="subNav">
                        <li><a href="ui.html" title=""><span class="icos-fullscreen"></span>General elements<span class="dataNumRed">6</span></a></li>
                        <li><a href="ui_icons.html" title=""><span class="icos-images2"></span>Icons<span class="dataNumGreen">7</span></a></li>
                        <li><a href="ui_buttons.html" title=""><span class="icos-coverflow"></span>Button sets<span class="dataNumBlue">12</span></a></li>
                        <li><a href="ui_grid.html" title=""><span class="icos-view"></span>Grid<span class="dataNumGrey">65</span></a></li>
                        <li><a href="ui_custom.html" title="" class="this"><span class="icos-cog2"></span>Custom elements</a></li>
                        <li><a href="ui_experimental.html" title=""><span class="icos-beta"></span>Experimental</a></li>
                    </ul>
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar file uploads widget -->
                    <div class="sideUpload">
                        <div class="dropFiles"></div>
                        <ul class="filesDown">
                            <li class="currentFile">
                                <div class="fileProcess">
                                    <img src="images/elements/loaders/10s.gif" alt="" class="loader" />
                                    <strong>Homepage_widgets_102.psd</strong>
                                    <div class="fileProgress">
                                        <span>9.1 of 17MB</span> - <span>243KB/sec</span> - <span>1 min</span>
                                    </div>
                                    
                                    <div class="contentProgress"><div class="barG tipN" title="61%" id="bar10"></div></div>
                                </div>
                            </li>
                            <li><span class="fileSuccess"></span>About_Us_08956.psd<span class="remove"></span></li>
                            <li><span class="fileSuccess"></span>Our_services_02811.psd<span class="remove"></span></li>
                            <li><span class="fileError"></span>Homepage_Alt_032811.psd<span class="remove"></span></li>
                            <li><span class="fileQueue"></span>Homepage_Alt_032811.psd<span class="remove"></span></li>
                            <li><span class="fileQueue"></span>Homepage_Alt_032811.psd<span class="remove"></span></li>
                        </ul>
                    </div>
                </div>
                
                <div id="alt1">
                
                	<!-- Sidebar dropdown -->
                    <ul class="fulldd">
                        <li class="has">
                            <a title="">
                                <span class="icos-money3"></span>
                                Invoices
                                <span><img src="images/elements/control/hasddArrow.png" alt="" /></span>
                            </a>
                            <ul>
                                <li><a href="#" title=""><span class="icos-add"></span>New invoice</a></li>
                                <li><a href="#" title=""><span class="icos-archive"></span>History</a></li>
                                <li><a href="#" title=""><span class="icos-printer"></span>Print invoices</a></li>
                            </ul>
                        </li>
                    </ul>
                    
                    <div class="divider"><span></span></div>
                
                	<!-- Full size tab -->
                    <ul class="iconsLine ic1 etabs">
                        <li><a href="#" class="exp">Simple text link</a></li>
                    </ul>
                
                    <div class="divider"><span></span></div>
                    
                    <!-- 2 items tab panel -->
                    <ul class="iconsLine ic2 etabs">
                        <li><a href="#" title=""><span class="icos-users"></span></a></li>
                        <li><a href="#" title=""><span class="icos-fullscreen"></span></a></li>
                    </ul>
        
                    <div class="divider"><span></span></div>
                    
                    <!-- 3 items tab panel -->
                    <ul class="iconsLine ic3 etabs">
                        <li><a href="#" title=""><span class="icos-users"></span></a></li>
                        <li><a href="#" title=""><span class="icos-files"></span></a></li>
                        <li><a href="#" title=""><span class="icos-transfer"></span></a></li>
                    </ul>
        
                    <div class="divider"><span></span></div>
                    
                    <!-- 4 items tab panel -->
                    <ul class="iconsLine ic4 etabs">
                        <li><a href="#" title=""><span class="icos-images2"></span></a></li>
                        <li><a href="#" title=""><span class="icos-money3"></span></a></li>
                        <li><a href="#" title=""><span class="icos-graph"></span></a></li>
                        <li><a href="#" title=""><span class="icos-check"></span></a></li>
                    </ul>
        
                    <div class="divider"><span></span></div>
                    
                    <!-- 5 items tab panel -->
                    <ul class="iconsLine ic5 etabs">
                        <li><a href="#" title=""><span class="icos-cog"></span></a></li>
                        <li><a href="#" title=""><span class="icos-comment"></span></a></li>
                        <li><a href="#" title=""><span class="icos-create2"></span></a></li>
                        <li><a href="#" title=""><span class="icos-download"></span></a></li>
                        <li><a href="#" title=""><span class="icos-email"></span></a></li>
                    </ul>
        
                    <div class="divider"><span></span></div>
                    
                    <!-- Another 3 buttons -->
                    <div class="sideFullWidth">
                        <ul>
                            <li><a href="#" title=""><span class="users"></span></a></li>
                            <li><a href="#" title=""><span class="users"></span></a></li>
                            <li><a href="#" title=""><span class="users"></span></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    
                    <div class="divider"><span></span></div>
                
                	<!-- Sidebar user list -->
                    <ul class="userList">
                        <li>
                            <a href="#" title="">
                                <img src="images/live/face1.png" alt="" />
                                <span class="contactName">
                                    <strong>Eugene Kopyov <span>(5)</span></strong>
                                    <i>web &amp; ui designer</i>
                                </span>
                                <span class="status_away"></span>
                                <span class="clear"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" title="">
                                <img src="images/live/face2.png" alt="" />
                                <span class="contactName">
                                    <strong>Lucy Wilkinson <span>(12)</span></strong>
                                    <i>Team leader</i>
                                </span>
                                <span class="status_off"></span>
                                <span class="clear"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" title="">
                                <img src="images/live/face3.png" alt="" />
                                <span class="contactName">
                                    <strong>John Dow</strong>
                                    <i>PHP developer</i>
                                </span>
                                <span class="status_available"></span>
                                <span class="clear"></span>
                            </a>
                        </li>
                    </ul>
                    
                    <div class="divider"><span></span></div>
                
                    <!-- Sidebar big buttons -->
                    <div class="sidePad">
                        <a href="#" title="" class="sideB bBlue">Add new session</a>
                        <a href="#" title="" class="sideB bBrown mt10">Add new session</a>
                        <a href="#" title="" class="sideB bRed mt10">Add new session</a>
                        <a href="#" title="" class="sideB bLightBlue mt10">Add new session</a>
                        <a href="#" title="" class="sideB bSea mt10">Add new session</a>
                    </div>
                    
                    <div class="divider"><span></span></div>
        			
                    <!-- Sidebar progress bars -->
                    <div class="sideWidget">
                        <div class="contentProgress"><div class="barGr tipS" id="bar1" title="15%"></div></div>   
                        <div class="contentProgress mt8"><div class="barB tipS" id="bar2" title="30%"></div></div>
                        <div class="contentProgress mt8"><div class="barO tipS" id="bar3" title="45%"></div></div>
                        <div class="contentProgress mt8"><div class="barBl tipS" id="bar4" title="60%"></div></div>
                        <div class="contentProgress mt8"><div class="barR tipS" id="bar5" title="75%"></div></div>  
                    </div>       
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar chart -->
                    <div class="sideChart">
                        <div class="chartS"></div>
                    </div>
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar chart -->
                    <div class="sideChart">
                        <div class="barsS" id="placeholder1_hS"></div>
                    </div>
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar chart -->
                    <div class="sideChart">
                        <div class="barsS" id="placeholder1S"></div>
                    </div>
                </div>
                
                
                <div id="alt2">
                
                	<!-- Sidebar notifications -->
                    <div class="nNote nWarning">
                        <p>Warning message</p>
                    </div>
                    <div class="nNote nInformation" style="margin-top:15px;">
                        <p>Information notice</p>
                    </div>   
                    <div class="nNote nSuccess" style="margin-top:15px;">
                        <p>Success. Hoooraaay!!!!</p>
                    </div>  
                    <div class="nNote nFailure" style="margin-top:15px;">
                        <p>Something went wrong here</p>
                    </div>
                    
                    <div class="divider"><span></span></div>
                
                	<!-- Sidebar forms -->
                    <div class="sideWidget">
                        <div class="formRow">
                            <label>Usual input field:</label>
                            <input type="text" name="regular" placeholder="Your name" />
                        </div>
                        <div class="formRow">
                           <label>Usual password field:</label>
                            <input type="password" name="regular" placeholder="Your password" /> 
                        </div>
                        <div class="formRow">
                            <label>Single file uploader:</label>
                            <input type="file" class="fileInput" id="fileInput" />
                        </div>
                        <div class="formRow">
                            <label>Dropdown menu:</label>
                            <select name="select2" >
                                <option value="opt1">Usual select box</option>
                                <option value="opt2">Option 2</option>
                                <option value="opt3">Option 3</option>
                                <option value="opt4">Option 4</option>
                                <option value="opt5">Option 5</option>
                                <option value="opt6">Option 6</option>
                                <option value="opt7">Option 7</option>
                                <option value="opt8">Option 8</option>
                            </select>
                        </div>
                        
                        <div class="formRow searchDrop">
                            <label>Dropdown with search:</label>
                            <select data-placeholder="Choose a Country..." class="select" tabindex="2">
                                <option value=""></option> 
                                <option value="Cambodia">Cambodia</option> 
                                <option value="Cameroon">Cameroon</option> 
                                <option value="Canada">Canada</option> 
                                <option value="Cape Verde">Cape Verde</option> 
                                <option value="Cayman Islands">Cayman Islands</option> 
                                <option value="Central African Republic">Central African Republic</option> 
                                <option value="Chad">Chad</option> 
                                <option value="Chile">Chile</option> 
                                <option value="China">China</option> 
                                <option value="Christmas Island">Christmas Island</option> 
                                <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option> 
                                <option value="Colombia">Colombia</option> 
                                <option value="Comoros">Comoros</option> 
                                <option value="Congo">Congo</option> 
                                <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option> 
                                <option value="Cook Islands">Cook Islands</option> 
                                <option value="Costa Rica">Costa Rica</option> 
                                <option value="Cote D'ivoire">Cote D'ivoire</option> 
                                <option value="Croatia">Croatia</option> 
                                <option value="Cuba">Cuba</option> 
                                <option value="Cyprus">Cyprus</option> 
                                <option value="Czech Republic">Czech Republic</option> 
                                <option value="Denmark">Denmark</option> 
                                <option value="Djibouti">Djibouti</option> 
                                <option value="Dominica">Dominica</option> 
                                <option value="Dominican Republic">Dominican Republic</option> 
                                <option value="Ecuador">Ecuador</option> 
                                <option value="Egypt">Egypt</option> 
                                <option value="El Salvador">El Salvador</option> 
                                <option value="Equatorial Guinea">Equatorial Guinea</option> 
                                <option value="Eritrea">Eritrea</option> 
                                <option value="Estonia">Estonia</option> 
                                <option value="Ethiopia">Ethiopia</option> 
                                <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option> 
                                <option value="Faroe Islands">Faroe Islands</option> 
                                <option value="Fiji">Fiji</option> 
                                <option value="Finland">Finland</option> 
                                <option value="France">France</option> 
                                <option value="French Guiana">French Guiana</option> 
                                <option value="French Polynesia">French Polynesia</option> 
                                <option value="French Southern Territories">French Southern Territories</option> 
                                <option value="Gabon">Gabon</option> 
                                <option value="Gambia">Gambia</option> 
                                <option value="Georgia">Georgia</option> 
                                <option value="Germany">Germany</option> 
                                <option value="Ghana">Ghana</option> 
                                <option value="Gibraltar">Gibraltar</option> 
                                <option value="Greece">Greece</option> 
                            </select>
                        </div>
                    
                        <div class="formRow">
                            <input type="checkbox" id="check2" name="chbox1" checked="checked" class="check" />
                            <label for="check2"  class="nopadding">Checkbox checked</label>
                            <div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <input type="radio" id="radio1" name="question1" checked="checked" />
                            <label for="radio1"  class="nopadding">Usual radio button</label>
                            <div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <label>Usual textarea:</label>
                            <textarea rows="8" cols="" name="textarea" placeholder="Your message"></textarea>
                        </div>
                        <div class="formRow">
                            <input type="submit" class="buttonS bLightBlue" value="Submit button" />
                        </div>
                    </div>
                    
                    <div class="divider"><span></span></div>
            		
                    <!-- Sidebar buttons -->
                    <div class="fluid sideWidget">
                        <div class="grid6"><input type="submit" class="buttonS bRed" value="Cancel" /></div>
                        <div class="grid6"><input type="submit" class="buttonS bGreen" value="Submit" /></div>
                    </div>
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar file tree -->
                    <div class="widget">
                        <div class="whead">
                            <h6><span class="icon-tree-view"></span>Simple jQuery file tree</h6>
                            <div class="clear"></div>
                        </div>
                        <div class="filetree"></div>
                    </div>
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar tags line -->
                    <div class="formRow">
                        <input type="text" id="tags" name="tags" class="tags" value="these,are,sample,tags" />
                    </div>
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar toggles -->
                    <div class="widget togglesGroup">
                        <div class="whead opened" id="toggleOpened"><h6>Toggles group. Active</h6><div class="clear"></div></div>
                        <div class="body">This widget is opened by default. Works in case of adding id="opened" to the widget head</div>
                        
                        <div class="whead closed"><h6>Toggles group. Inactive</h6><div class="clear"></div></div>
                        <div class="body">This widget is closed by default.</div>
                        
                        <div class="whead closed"><h6>Toggles group. Inactive</h6><div class="clear"></div></div>
                        <div class="body">This widget is closed by default.</div>
                    </div>
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar accordion -->
                    <div class="widget acc">      
                      <div class="whead"><h6>Accordion menu. Active</h6><div class="clear"></div></div>
                        <div class="menu_body">
                            This is an accordion. This one is collapsible and opened by default
                        </div>
                      <div class="whead"><h6>Accordion menu. Inactive</h6><div class="clear"></div></div>
                        <div class="menu_body">
                            Now this one is active
                        </div>
                      <div class="whead"><h6>Accordion menu. Inactive</h6><div class="clear"></div></div>
                        <div class="menu_body">
                            And now this one...
                       </div>
                    </div>  
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar widget sample -->
                    <div class="widget">
                        <div class="whead"><h6>Widget header</h6><div class="clear"></div></div>
                        <div class="body">Widget content</div>
                    </div>
                    
                    <div class="divider"><span></span></div>
                    
                    <!-- Sidebar datepicker -->
                    <div class="sideWidget">
                        <div class="inlinedate"></div>
                    </div>
                </div>
            </div>
            
            <div class="divider"><span></span></div>
            
            <!-- Another title -->
            <h6><span class="icon-cog"></span>Just another title example</h6>
            
            <div class="divider"><span></span></div>
            
            <!-- Sidebar table -->
            <div class="widget">
                <div class="whead"><h6>Table example</h6><div class="clear"></div></div>
                <table cellpadding="0" cellspacing="0" width="100%" class="tDefault sideTable">
                    <thead>
                        <tr>
                            <td>Column</td>
                            <td>Column</td>
                            <td>Column</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Row 1</td>
                            <td>Row 2</td>
                            <td>Row 3</td>
                        </tr>
                        <tr>
                            <td>Row 1</td>
                            <td>Row 2</td>
                            <td>Row 3</td>
                        </tr>
                        <tr>
                            <td>Row 1</td>
                            <td>Row 2</td>
                            <td>Row 3</td>
                        </tr>
                        <tr>
                            <td>Row 1</td>
                            <td>Row 2</td>
                            <td>Row 3</td>
                        </tr>
                        <tr>
                            <td>Row 1</td>
                            <td>Row 2</td>
                            <td>Row 3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="divider"><span></span></div>
            
       </div> 
       <div class="clear"></div>
   </div>
</div>
<!-- Sidebar ends -->
    
    
<!-- Content begins -->    
<div id="content">
    <div class="contentTop">
        <span class="pageTitle"><span class="icon-cog"></span>Custom sidebar and content stuff</span>
        <ul class="quickStats">
            <li>
                <a href="" class="blueImg"><img src="images/icons/quickstats/plus.png" alt="" /></a>
                <div class="floatR"><strong class="blue">5489</strong><span>visits</span></div>
            </li>
            <li>
                <a href="" class="redImg"><img src="images/icons/quickstats/user.png" alt="" /></a>
                <div class="floatR"><strong class="blue">4658</strong><span>users</span></div>
            </li>
            <li>
                <a href="" class="greenImg"><img src="images/icons/quickstats/money.png" alt="" /></a>
                <div class="floatR"><strong class="blue">1289</strong><span>orders</span></div>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
    
    <!-- Breadcrumbs line -->
    <div class="breadLine">
        <div class="bc">
            <ul id="breadcrumbs" class="breadcrumbs">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">UI elements</a>
                    <ul>
                        <li><a href="ui.html" title="">General elements</a></li>
                        <li><a href="ui_icons.html" title="">Icons</a></li>
                         <li><a href="ui_buttons.html" title="">Button sets</a></li>
                        <li><a href="ui_grid.html" title="">Grid</a></li>
                        <li><a href="ui_experimental.html" title="">Experimental</a></li>
                    </ul>
                </li>
                <li class="current"><a href="ui_custom.html" title="">Custom elements</a></li>
            </ul>
        </div>
        
        <div class="breadLinks">
            <ul>
                <li><a href="#" title=""><i class="icos-list"></i><span>Orders</span> <strong>(+58)</strong></a></li>
                <li><a href="#" title=""><i class="icos-check"></i><span>Tasks</span> <strong>(+12)</strong></a></li>
                <li class="has">
                    <a title="">
                        <i class="icos-money3"></i>
                        <span>Invoices</span>
                        <span><img src="images/elements/control/hasddArrow.png" alt="" /></span>
                    </a>
                    <ul>
                        <li><a href="#" title=""><span class="icos-add"></span>New invoice</a></li>
                        <li><a href="#" title=""><span class="icos-archive"></span>History</a></li>
                        <li><a href="#" title=""><span class="icos-printer"></span>Print invoices</a></li>
                    </ul>
                </li>
            </ul>
             <div class="clear"></div>
        </div>
    </div>
    
    <!-- Main content -->
    <div class="wrapper">
        <ul class="middleNavR">
            <li><a href="#" title="Add an article" class="tipN"><img src="images/icons/middlenav/create.png" alt="" /></a></li>
            <li><a href="#" title="Upload files" class="tipN"><img src="images/icons/middlenav/upload.png" alt="" /></a></li>
            <li><a href="#" title="Add something" class="tipN"><img src="images/icons/middlenav/add.png" alt="" /></a></li>
            <li><a href="#" title="Messages" class="tipN"><img src="images/icons/middlenav/dialogs.png" alt="" /></a><strong>8</strong></li>
            <li><a href="#" title="Check statistics" class="tipN"><img src="images/icons/middlenav/stats.png" alt="" /></a></li>
        </ul>
    
        <div class="fluid">
            <div class="grid4">
            
            	<!-- News widget -->
                <div class="widget">
                    <div class="whead"><h6>Some news</h6><div class="clear"></div></div>
                    <ul class="updates">
                        <li>
                            <div class="wNews">
                                <a href="#" title="" class="headline"><img src="images/live/face1.png" alt="" /></a>
                                <div class="announce">
                                    <a href="#" title="">New iPhone 5 is coming!</a>
                                    <span>A very nice phone with useless stuff ...</span>
                                </div>
                            </div>
                            <span class="uDate"><span>02</span>jun</span>
                            <span class="clear"></span>
                        </li>
                        <li>
                            <div class="wNews">
                                <a href="#" title="" class="headline"><img src="images/live/face2.png" alt="" /></a>
                                <div class="announce">
                                    <a href="#" title="">Sensor finds lost keys and wallet</a>
                                    <span>Forgetful geeks need never lose keys ...</span>
                                </div>
                            </div>
                            <span class="uDate"><span>04</span>jun</span>
                            <span class="clear"></span>
                        </li>
                        <li>
                            <div class="wNews">
                                <a href="#" title="" class="headline"><img src="images/live/face3.png" alt="" /></a>
                                <div class="announce">
                                    <a href="#" title="">China plans new manned space flight</a>
                                    <span>China has announced it will carry out ...</span>
                                </div>
                            </div>
                            <span class="uDate"><span>05</span>jun</span>
                            <span class="clear"></span>
                        </li>
                    </ul>
                </div>
                
                <!-- Updates widget -->
                <div class="widget">
                    <div class="whead"><h6>Updates</h6><div class="clear"></div></div>
                    <ul class="updates">
                        <li>
                            <span class="uDone">
                                <a href="#" title="">A new server is on the board!</a>
                                <span>We've just set up a new server. Our gurus ...</span>
                            </span>
                            <span class="uDate"><span>24</span>may</span>
                            <span class="clear"></span>
                        </li>
                        <li>
                            <span class="uAlert">
                                <a href="#" title="">[ URGENT ] ex.ua was closed by government</a>
                                <span>But already everything was solved. It will ...</span>
                            </span>
                            <span class="uDate"><span>25</span>may</span>
                            <span class="clear"></span>
                        </li>
                        <li>
                            <span class="uNotice">
                                <a href="#" title="">Meat a new team member - Don Corleone</a>
                                <span>Very dyplomatic and flexible sales manager</span>
                            </span>
                            <span class="uDate"><span>02</span>jun</span>
                            <span class="clear"></span>
                        </li>
                    </ul>
                </div>
                
                <!-- My tasks widget -->
                <div class="widget">
                    <div class="whead"><h6>My tasks</h6><div class="clear"></div></div>
                    <table cellpadding="0" cellspacing="0" width="100%" class="tDefault mytasks">
                        <thead>
                            <tr>
                                <td colspan="2">Description</td>
                                <td width="60">Status</td>
                                <td width="40">Acts</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td width="16" align="center"><span class="taskPending"></span></td>
                                <td><a href="#" title="">Finish design</a></td>
                                <td align="center"><strong class="grey">0%</strong></td>
                                <td class="tableActs">
                                    <div class="btn-group">
                                        <a href="#" class="tablectrl_small bDefault" data-toggle="dropdown">
                                            <span class="iconb" data-icon="&#xe1f7;"></span>
                                        </a>
                                        <ul class="dropdown-menu pull-right">
                                            <li><a href="#" class=""><span class="icon-plus"></span>Add</a></li>
                                            <li><a href="#" class=""><span class="icon-remove"></span>Remove</a></li>
                                            <li><a href="#" class=""><span class="icon-pen_alt2"></span>Edit</a></li>
                                            <li><a href="#" class=""><span class="icon-heart"></span>Do whatever you like</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center"><span class="taskProgress"></span></td>
                                <td><a href="#" title="">Aquincum HTML code</a></td>
                                <td align="center"><strong class="green">89%</strong></td>
                                <td class="tableActs">
                                    <div class="btn-group">
                                        <a href="#" class="tablectrl_small bDefault" data-toggle="dropdown">
                                            <span class="iconb" data-icon="&#xe1f7;"></span>
                                        </a>
                                        <ul class="dropdown-menu pull-right">
                                            <li><a href="#" class=""><span class="icon-plus"></span>Add</a></li>
                                            <li><a href="#" class=""><span class="icon-remove"></span>Remove</a></li>
                                            <li><a href="#" class=""><span class="icon-pen_alt2"></span>Edit</a></li>
                                            <li><a href="#" class=""><span class="icon-heart"></span>Do whatever you like</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center"><span class="taskProgress"></span></td>
                                <td><a href="#" title="">Fix buggy css styles</a></td>
                                <td align="center"><strong class="red">16%</strong></td>
                                <td class="tableActs">
                                    <div class="btn-group">
                                        <a href="#" class="tablectrl_small bDefault" data-toggle="dropdown">
                                            <span class="iconb" data-icon="&#xe1f7;"></span>
                                        </a>
                                        <ul class="dropdown-menu pull-right">
                                            <li><a href="#" class=""><span class="icon-plus"></span>Add</a></li>
                                            <li><a href="#" class=""><span class="icon-remove"></span>Remove</a></li>
                                            <li><a href="#" class=""><span class="icon-pen_alt2"></span>Edit</a></li>
                                            <li><a href="#" class=""><span class="icon-heart"></span>Do whatever you like</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center"><span class="taskDone"></span></td>
                                <td><a href="#" title="">Documentation</a></td>
                                <td align="center"><strong class="grey">100%</strong></td>
                                <td class="tableActs">
                                    <div class="btn-group">
                                        <a href="#" class="tablectrl_small bDefault" data-toggle="dropdown">
                                            <span class="iconb" data-icon="&#xe1f7;"></span>
                                        </a>
                                        <ul class="dropdown-menu pull-right">
                                            <li><a href="#" class=""><span class="icon-plus"></span>Add</a></li>
                                            <li><a href="#" class=""><span class="icon-remove"></span>Remove</a></li>
                                            <li><a href="#" class=""><span class="icon-pen_alt2"></span>Edit</a></li>
                                            <li><a href="#" class=""><span class="icon-heart"></span>Do whatever you like</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>            
                </div>
                
                <!-- Website statistics widget -->
                <div class="widget">
                    <div class="whead">
                        <h6>Website statistics</h6>
                        <div class="titleOpt">
                          <a href="#" data-toggle="dropdown"><span class="iconb" data-icon="&#xe04d;"></span><span class="clear"></span></a>
                          <ul class="dropdown-menu pull-right">
                            <li><a href="#" class=""><span class="icon-plus"></span>Add</a></li>
                                <li><a href="#" class=""><span class="icon-remove"></span>Remove</a></li>
                                <li><a href="#" class=""><span class="icon-pen_alt2"></span>Edit</a></li>
                                <li><a href="#" class=""><span class="icon-heart"></span>Do whatever you like</a></li>
                          </ul>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <table cellpadding="0" cellspacing="0" width="100%" class="tAlt">
                        <thead>
                            <tr>
                                <td width="60">Amount</td>
                                <td>Description</td>
                                <td width="70">Changes</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td align="center"><a href="#" title="" class="webStatsLink">980</a></td>
                                <td>returned visitors</td>
                                <td align="center"><span class="statsPlus">0.32%</span></td>
                            </tr>
                            <tr>
                                <td align="center"><a href="#" title="" class="webStatsLink">1545</a></td>
                                <td>new registrations</td>
                                <td align="center"><span class="statsMinus">82.3%</span></td>
                            </tr>
                            <tr>
                                <td align="center"><a href="#" title="" class="webStatsLink">457</a></td>
                                <td>new affiliates registrations</td>
                                <td align="center"><span class="statsPlus">100%</span></td>
                            </tr>
                            <tr>
                                <td align="center"><a href="#" title="" class="webStatsLink">9543</a></td>
                                <td>new visitors</td>
                                <td align="center"><span class="statsPlus">4.99%</span></td>
                            </tr>
                            <tr>
                                <td align="center"><a href="#" title="" class="webStatsLink">354 </a></td>
                                <td>new pending comments</td>
                                <td align="center"><span class="statsMinus">9.67%</span></td>
                            </tr>
                        </tbody>
                    </table>    
                </div>
                
                <!-- File tree widget -->
                <div class="widget">
                    <div class="whead"><h6>File tree</h6><div class="clear"></div></div>
                    <div class="filetree"></div>
                </div>   
                
                <!-- Send message widget -->
                <div class="widget">
                    <div class="body">
                        <div class="messageTo">
                            <a href="#" title="" class="uName"><img src="images/live/face5.png" alt="" /></a><span> Send message to <strong>Eugene</strong></span>
                            <a href="#" title="" class="uEmail">e.kopyov@gmail.com</a>
                        </div>
                        <textarea rows="5" cols="" name="textarea" class="auto" placeholder="Write your message"></textarea>
                        <div class="mesControls">
                            <span><span class="iconb" data-icon="&#xe20d;"></span>Some basic <a href="#" title="">HTML</a> is OK</span>
                            
                            <div class="sendBtn sendwidget">
                                <a href="#" title="" class="attachPhoto"></a>
                                <a href="#" title="" class="attachLink"></a>
                                <input type="submit" name="sendMessage" class="buttonM bLightBlue" value="Send message" />
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>        
                        
            </div>
            
            <div class="grid4">
            
                <!-- Search widget -->
                <div class="searchLine">
                    <form action="">
                        <input type="text" name="search" class="ac" placeholder="Enter search text..." />
                       <button type="submit" name="find" value=""><span class="icos-search"></span></button>
                    </form>
                </div>
                
                <!-- Search widget -->
                <div class="widget searchWidget noBorderB">
                    <div class="whead">
                        <input type="text" name="srch" class="ac" placeholder="Search..." />
                        <button type="submit" name="swSubmit"><span class="icos-search"></span></button>
                    </div>
                </div>
                
                <!-- Search widget with results -->
                <div class="searchLine">
                    <div class="relative">
                        <input type="text" name="search" class="ac" placeholder="Enter search text..." />
                       <button type="submit" name="find" value="">
                           <span class="icos-search"></span>
                       </button>
                    </div>
                    <div class="sResults">
                        <span class="arrow"></span>
                        <ul class="updates">
                            <li>
                                <span class="uDone">
                                    <a href="#" title="">A new server is on the board!</a>
                                    <span>We've just set up a new server. Our gurus ...</span>
                                </span>
                                <span class="uDate"><span>24</span>may</span>
                                <span class="clear"></span>
                            </li>
                            <li>
                                <span class="uAlert">
                                    <a href="#" title="">[ URGENT ] ex.ua was closed by government</a>
                                    <span>But already everything was solved. It will ...</span>
                                </span>
                                <span class="uDate"><span>25</span>may</span>
                                <span class="clear"></span>
                            </li>
                            <li>
                                <span class="uNotice">
                                    <a href="#" title="">Meat a new team member - Don Corleone</a>
                                    <span>Very dyplomatic and flexible sales manager</span>
                                </span>
                                <span class="uDate"><span>02</span>jun</span>
                                <span class="clear"></span>
                            </li>
                            <li>
                                <span class="uAlert">
                                    <a href="#" title="">[ URGENT ] ex.ua was closed by government</a>
                                    <span>But already everything was solved. It will ...</span>
                                </span>
                                <span class="uDate"><span>25</span>may</span>
                                <span class="clear"></span>
                            </li>
                            <li>
                                <span class="uNotice">
                                    <a href="#" title="">Meat a new team member - Don Corleone</a>
                                    <span>Very dyplomatic and flexible sales manager</span>
                                </span>
                                <span class="uDate"><span>02</span>jun</span>
                                <span class="clear"></span>
                            </li>
                        </ul>
                    </div>
                    
                </div>
                
                <!-- Search widget with results -->
                <div class="widget searchWidget">
                    <div class="whead">
                        <input type="text" name="srch" class="ac" placeholder="Search..." />
                        <button type="submit" name="swSubmit"><span class="icos-search"></span></button>
                    </div>
                    <ul class="updates">
                        <li>
                            <span class="uDone">
                                <a href="#" title="">A new server is on the board!</a>
                                <span>We've just set up a new server. Our gurus ...</span>
                            </span>
                            <span class="uDate"><span>24</span>may</span>
                            <span class="clear"></span>
                        </li>
                        <li>
                            <span class="uAlert">
                                <a href="#" title="">[ URGENT ] ex.ua was closed by government</a>
                                <span>But already everything was solved. It will ...</span>
                            </span>
                            <span class="uDate"><span>25</span>may</span>
                            <span class="clear"></span>
                        </li>
                        <li>
                            <span class="uNotice">
                                <a href="#" title="">Meat a new team member - Don Corleone</a>
                                <span>Very dyplomatic and flexible sales manager</span>
                            </span>
                            <span class="uDate"><span>02</span>jun</span>
                            <span class="clear"></span>
                        </li>
                        <li>
                            <span class="uAlert">
                                <a href="#" title="">[ URGENT ] ex.ua was closed by government</a>
                                <span>But already everything was solved. It will ...</span>
                            </span>
                            <span class="uDate"><span>25</span>may</span>
                            <span class="clear"></span>
                        </li>
                        <li>
                            <span class="uNotice">
                                <a href="#" title="">Meat a new team member - Don Corleone</a>
                                <span>Very dyplomatic and flexible sales manager</span>
                            </span>
                            <span class="uDate"><span>02</span>jun</span>
                            <span class="clear"></span>
                        </li>
                    </ul>
                    
                    <div class="pagination">
                        <ul class="pages">
                            <li class="prev"><a href="#">&lt;</a></li>
                            <li><a href="#" class="active">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li>...</li>
                            <li><a href="#">30</a></li>
                            <li class="next"><a href="#">&gt;</a></li>
                        </ul>
                    </div>
                    
                </div>
                
                <!-- Syntax highlighter widget -->
                <div class="widget">
                    <div class="whead"><h6>Syntax highlighter</h6><a href="#" class="buttonH bBlue" title="">Inspect</a><div class="clear"></div></div>
                    <pre class="code">
    $( ".datepicker" ).datepicker({ 
    defaultDate: +7,
    showOtherMonths:true,
    autoSize: true,
    appendText: '(dd-mm-yyyy)',
    dateFormat: 'dd-mm-yy',
    });	</pre>
                </div>                
                
                <!-- Quick settings widget -->
                <div class="widget">
                    <div class="whead"><h6>Quick settings</h6><a href="#" class="buttonH bBlue" title="">Save</a><div class="clear"></div></div>
                    <ul class="niceList params">
                        <li>
                            <div class="myPic"><img src="images/user.png" alt="" /></div>
                            <div class="myInfo">
                                <h5>Eugene Kopyov <a href="#" class="icona" data-icon="&#xe1ac;"></a></h5>
                                <span class="myRole">UI designer and developer</span>
                                <span class="followers"><i class="icon-twitter"></i>10.598 followers</span>
                            </div>
                            <div class="clear"></div>
                        </li>
                        <li class="on_off">
                            <label for="ch1"><span class="icon-key"></span>Keep me logged in:</label>
                            <input type="checkbox" id="ch1" checked="checked" name="chbox" />
                            <div class="clear"></div>
                        </li>
                        <li class="on_off">
                            <label for="ch2"><span class="icon-reload-CW"></span>Enable quick changes:</label>
                            <input type="checkbox" id="ch2" name="chbox" />
                            <div class="clear"></div>
                        </li>
                        <li class="on_off">
                            <label for="ch3"><span class="icon-fullscreen"></span>Allow quick view:</label>
                            <input type="checkbox" id="ch3" name="chbox" />
                            <div class="clear"></div>
                        </li>
                        <li class="on_off">
                            <label for="ch4"><span class="icon-locked-2"></span>Auto log off:</label>
                            <input type="checkbox" id="ch4" checked="checked" name="chbox" />
                            <div class="clear"></div>
                        </li>
                    </ul>
                </div>
                
            </div>
    
            <div class="grid4">
            	
                <!-- Buttons as a widget -->
                <div class="wButton"><a href="#" title="" class="buttonL bLightBlue first">Button as a widget</a></div>
                <div class="wButton"><a href="#" title="" class="buttonL bGreen" style="margin-top: 10px;">Button as a widget</a></div>
                
                <div class="fluid">
                    <div class="wButton grid6"><a href="#" title="" class="buttonL bRed" style="margin-top: 10px;">Button as a widget</a></div>
                    <div class="wButton grid6"><a href="#" title="" class="buttonL bBlack" style="margin-top: 10px;">Button as a widget</a></div>
                </div>
            
            	<!-- Inline datepicker widget -->
                <div class="inlinedate"></div>
                
                <!-- Earnings widget -->
                <div class="widget">
                    <div class="whead">
                        <h6>Earnings</h6>
                        <div class="on_off">
                            <span class="icon-reload-CW"></span><input type="checkbox" id="check1" checked="checked" name="chbox" /></div>
                        <div class="clear"></div>
                    </div>
                    
                    <table cellpadding="0" cellspacing="0" width="100%" class="tAlt wGeneral">
                        <thead>
                            <tr>
                                <td width="30">Thumb</td>
                                <td>Description</td>
                                <td width="80">Status</td>
                                <td width="80">Acts</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face1.png" alt="" /></a></td>
                                <td><a href="#" title="">Aquincum - premium admin template</a><span>39 minutes ago</span></td>
                                <td align="center"><strong>11 sales</strong><span>&sim;10 sales/mo</span></td>
                                <td align="center"><strong class="income">$156.08</strong><span>$1876.89</span></td>
                            </tr>
                            <tr>
                                <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face2.png" alt="" /></a></td>
                                <td><a href="#" title="">It's Brain premium admin theme</a><span>48 minutes ago</span></td>
                                <td align="center"><strong>10 sales</strong><span>&sim;14 sales/mo</span></td>
                                <td align="center"><strong class="income">$122.08</strong><span>$5485.56</span></td>
                            </tr>
                            <tr>
                                <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face3.png" alt="" /></a></td>
                                <td><a href="#" title="">Miriam - business HTML template</a><span>2 hours ago</span></td>
                                <td align="center"><strong>24 sales</strong><span>&sim;4 sales/mo</span></td>
                                <td align="center"><strong class="income">$84.08</strong><span>$452.74</span></td>
                            </tr>
                            <tr>
                                <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face4.png" alt="" /></a></td>
                                <td><a href="#" title="">Aquincum - premium admin template</a><span>5 hours ago</span></td>
                                <td align="center"><strong>2 sales</strong><span>&sim;26 sales/mo</span></td>
                                <td align="center"><strong class="income">$156.08</strong><span>$1447.48</span></td>
                            </tr>
                        </tbody>
                    </table>            
                    
                </div>
                
				<!-- Invoice widget -->
                <div class="widget">
                    <div class="whead">
                    <h6>Invoices statistics</h6>
                    <div class="titleOpt">
                      <a href="#" data-toggle="dropdown"><span class="iconb" data-icon="&#xe04d;"></span><span class="clear"></span></a>
                      <ul class="dropdown-menu pull-right">
                        <li><a href="#" class=""><span class="icon-plus"></span>Add</a></li>
                            <li><a href="#" class=""><span class="icon-remove"></span>Remove</a></li>
                            <li><a href="#" class=""><span class="icon-pen_alt2"></span>Edit</a></li>
                            <li><a href="#" class=""><span class="icon-heart"></span>Do whatever you like</a></li>
                      </ul>
                    </div>
                    <div class="clear"></div>
                    </div>
                    <div class="body">
                        <ul class="wInvoice">
                            <li><h4 class="green">$63,456</h4><span>amount paid</span></li>
                            <li><h4 class="blue">$218,518</h4><span>in queue</span></li>
                            <li><h4 class="red">$16,542</h4><span>total taxes</span></li>
                        </ul>
                        <div class="contentProgress"><div class="barG tipN" title="61%" id="bar7"></div></div>
                        <ul class="ruler">
                            <li>0</li>
                            <li class="textC">50%</li>
                            <li class="textR">100%</li>
                        </ul>
                        <div class="clear"></div>
                        
                        <div class="invList fluid">
                            <a href="#" title="" class="buttonS bGreen grid6">Print invoices</a>
                            <a href="#" title="" class="buttonS bLightBlue grid6">Generate report</a>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                
                <!-- Latest users widget -->
                <div class="widget">
                    <div class="whead"><h6>Latest users</h6><a href="#" class="buttonH bBlue" title="">View all</a><div class="clear"></div></div>
                    <table cellpadding="0" cellspacing="0" width="100%" class="tAlt wGeneral">
                        <thead>
                            <tr>
                                <td width="30">Thumb</td>
                                <td>General info</td>
                                <td width="20%">Balance</td>
                                <td width="20%">Order</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face1.png" alt="" /></a></td>
                                <td><a href="#" title="">Eugene Kopyov</a><a href="#" title="" class="email">e.kopyov@gmail.com</a></td>
                                <td align="center"><strong>$12,872</strong><span>49 orders</span></td>
                                <td align="center"><strong class="income">VPS Maxi</strong><span>90 domains</span></td>
                            </tr>
                            <tr>
                                <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face2.png" alt="" /></a></td>
                                <td><a href="#" title="">Lucy Wilkinson</a><a href="#" title="" class="email">lucy@wilkinson.com</a></td>
                                <td align="center"><strong>$9,897</strong><span>120 orders</span></td>
                                <td align="center"><strong class="income">VPS Extra</strong><span>15 domains</span></td>
                            </tr>
                            <tr>
                                <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face3.png" alt="" /></a></td>
                                <td><a href="#" title="">Gary Goldenberg</a><a href="#" title="" class="email">gary@goldenberg.com</a></td>
                                <td align="center"><strong>$10,842</strong><span>49 orders</span></td>
                                <td align="center"><strong class="income">Domains</strong><span>189 domains</span></td>
                            </tr>
                            <tr>
                                <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face4.png" alt="" /></a></td>
                                <td><a href="#" title="">Bill Newman</a><a href="#" title="" class="email">bill@newman.com</a></td>
                                <td align="center"><strong>$89,124</strong><span>49 orders</span></td>
                                <td align="center"><strong class="income">VPS Maxi</strong><span>14 domains</span></td>
                            </tr>
                            <tr>
                                <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face5.png" alt="" /></a></td>
                                <td><a href="#" title="">Wilson Brown</a><a href="#" title="" class="email">wilson@brown.com</a></td>
                                <td align="center"><strong>$4,475</strong><span>49 orders</span></td>
                                <td align="center"><strong class="income">VPS Mini</strong><span>52 domains</span></td>
                            </tr>
                        </tbody>
                    </table>            
                </div>
                
                <!-- File downloads widget -->
                <div class="widget">
                    <div class="whead"><h6>File downloads</h6><div class="clear"></div></div>
                    <ul class="tbar">
                        <li><a href="#" title=""><span class="icos-refresh"></span>Change path</a></li>
                        <li><a href="#" title=""><span class="icos-upload"></span>Upload</a></li>
                        <li><a href="#" title=""><span class="icos-archive"></span>History</a></li>
                    </ul>
                    <ul class="filesDown">
                        <li class="currentFile">
                            <div class="fileProcess">
                                <img src="images/elements/loaders/10s.gif" alt="" class="loader" />
                                <strong>Homepage_widgets_102.psd</strong>
                                <div class="fileProgress">
                                    <span>9.1 of 17MB</span> - <span>243KB/sec</span> - <span>1 min</span>
                                </div>
                                
                                <div class="contentProgress"><div class="barG tipN" title="61%" id="bar9"></div></div>
                                <ul class="ruler">
                                    <li>0</li>
                                    <li class="textC">50%</li>
                                    <li class="textR">100%</li>
                                </ul>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li><span class="fileSuccess"></span>About_Us_08956.psd<span class="remove"></span></li>
                        <li><span class="fileSuccess"></span>Our_services_02811.psd<span class="remove"></span></li>
                        <li><span class="fileError"></span>Homepage_Alt_032811.psd<span class="remove"></span></li>
                    </ul>
                </div>
                
            </div>
        </div>

        <div class="divider"><span></span></div>

		<!-- Header elements -->
        <div class="fluid">
        	
            <!-- Header with dropdown -->
            <div class="widget grid3">
                <div class="whead">
                    <h6>Dropdown (image)</h6>
                    <div class="titleOpt">
                        <a href="#" data-toggle="dropdown"><span class="icos-cog3"></span><span class="clear"></span></a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#"><span class="icos-add"></span>Add</a></li>
                            <li><a href="#"><span class="icos-trash"></span>Remove</a></li>
                            <li><a href="#" class=""><span class="icos-pencil"></span>Edit</a></li>
                            <li><a href="#" class=""><span class="icos-heart"></span>Do whatever you like</a></li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
            
            <!-- Header with toolbar -->
            <div class="widget grid3">
                <div class="whead">
                    <h6>Toolbar</h6>
                    <ul class="titleToolbar">
                        <li><a href="#" class="">Edit</a></li>
                        <li><a href="#" class="">Remove</a></li>
                        <li class="drd"><a href="#" data-toggle="dropdown"><span class="iconb" data-icon="&#xe04d;"></span></a>
                            <ul class="dropdown-menu pull-right">
                                <li><a href="#"><span class="icos-add"></span>Add</a></li>
                                <li><a href="#"><span class="icos-trash"></span>Remove</a></li>
                                <li><a href="#" class=""><span class="icos-pencil"></span>Edit</a></li>
                                <li><a href="#" class=""><span class="icos-heart"></span>Do whatever you like</a></li>
                            </ul>
                        </li>
                    </ul> 
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
            
            <!-- Header with font icon -->
            <div class="widget grid3">
                <div class="whead">
                    <h6>Simple icon (font)</h6>
                    <div class="titleOpt">
                      <a href="#" data-toggle="dropdown"><span class="iconb" data-icon="&#xe265;"></span><span class="clear"></span></a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
            
            <!-- Header with top pulled dropdown -->
            <div class="widget grid3">
                <div class="whead">
                    <h6>Dropdown on top</h6>
                    <div class="titleOpt dropup">
                        <a href="#" data-toggle="dropdown"><span class="iconb" data-icon="&#xe265;"></span><span class="clear"></span></a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#"><span class="icos-add"></span>Add</a></li>
                            <li><a href="#"><span class="icos-trash"></span>Remove</a></li>
                            <li><a href="#" class=""><span class="icos-pencil"></span>Edit</a></li>
                            <li><a href="#" class=""><span class="icos-heart"></span>Do whatever you like</a></li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
        </div>

		<!-- Header marks -->
        <div class="fluid">
            <div class="widget grid3">
                <div class="whead">
                    <h6>Blue mark</h6>
                        <a href="#" class="dataNumBlue">215</a>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
            
            <div class="widget grid3">
                <div class="whead">
                    <h6>Green mark</h6>
                        <a href="#" class="dataNumGreen">215</a>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
            
            <div class="widget grid3">
                <div class="whead">
                    <h6>Red mark</h6>
                        <a href="#" class="dataNumRed">215</a>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
            
            <div class="widget grid3">
                <div class="whead">
                    <h6>Grey mark</h6>
                        <a href="#" class="dataNumGrey">215</a>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
        </div>
    
    	<!-- Header icons -->
        <div class="fluid">
            <div class="widget grid3">
                <div class="whead"><h6><span class="icon-download"></span>Title with icon</h6><div class="clear"></div></div>
                <div class="body">class="grid3"</div>
            </div>
            
            <div class="widget grid3">
                <div class="whead"><h6>Loader</h6><span class="headLoad"><img src="images/elements/loaders/6s.gif" alt="" /></span><div class="clear"></div></div>
                <div class="body">class="grid3"</div>
            </div>
            
            <div class="widget grid3">
                <div class="whead"><h6>Single icon</h6>
                <a href="#" class="headIcon icon-download tipS" title="download"></a>
                <div class="clear"></div></div>
                <div class="body">class="grid3"</div>
            </div>
            
            <div class="widget grid3">
                <div class="whead">
                    <h6>Icon set</h6>
                        <ul class="headIconSet">
                            <li><a href="#" class="icon-download tipS" title="download"></a></li>
                            <li><a href="#" class="icon-user-5 tipS" title="download"></a></li>
                            <li><a href="#" class="icon-cog tipS" title="download"></a></li>
                        </ul>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
        </div>
    
    	<!-- Other header stuff -->
        <div class="fluid">
        
        	<!-- Progress bars -->
            <div class="widget grid3">
                <div class="whead">
                    <h6>Progress bar</h6>
                    <div class="contentProgress"><div class="barB tipS" id="bar8" title="30%"></div></div>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
            
            <!-- Input fields -->
            <div class="widget grid3">
                <div class="whead">
                <h6>Input field</h6>
                <div class="headInput">
                <input type="text" name="headInput" placeholder="usual input" />
                <input type="submit" name="headSubmit" class="sbmt" value="" />
                </div>
                <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
            
            <!-- Search fields -->
            <div class="widget grid3">
                <div class="whead">
                <h6>Search field</h6>
                <div class="headInput">
                <input type="text" name="headSearch" placeholder="type to search" />
                <input type="submit" name="headSubmit" class="srch" value="" />
                </div>
                <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>
            
            <!-- Toggle switcher -->
            <div class="widget grid3">
                <div class="whead">
                    <h6>Checkbox</h6>
                    <!--<a href="#" class="bsideText">Some text</a>-->
                    <div class="on_off"><span class="icon-reload-CW"></span><input type="checkbox" id="check5" checked="checked" name="chbox" /></div>
                    <div class="clear"></div>
                </div>
                <div class="body">class="grid3"</div>
            </div>

        </div>
    
        <div class="divider"><span></span></div>
    
        <div class="fluid">
            <div class="widget grid3">
                <div class="whead"><h6>Default head</h6><div class="clear"></div></div>
                <div class="body">class="grid3"</div>
            </div>
            
            <div class="widget grid3">
                <div class="wheadLight"><h6>Lighter head</h6><div class="clear"></div></div>
                <div class="body">class="grid3"</div>
            </div>

            <div class="widget grid3">
                <div class="wheadLight2"><h6>A bit blue</h6><div class="clear"></div></div>
                <div class="body">class="grid3"</div>
            </div>
            
            <div class="widget grid3">
                <div class="wheadLight3"><h6>Another gradient type</h6><div class="clear"></div></div>
                <div class="body">class="grid3"</div>
            </div>
        </div>

    </div>
    <!-- Main content ends -->
    
</div>
<!-- Content ends -->
        
</body>
</html>
